<!DOCTYPE html>
<html lang="en">
    <head>
        <title>IFE Task 37</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            html, body {
                width: 100%;
                height: 100%;
            }
            header {
                width: 100%;
                height: 58px;
                background-color: #03A9F4;
                box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
            }
            .login {
                display: inline-block;
                margin-left: 10%;
                width: 58px;
                height: 58px;
                line-height: 58px;
                text-align: center;
                color: #fff;
                cursor: pointer;
            }
            .login:hover {
                background-color: rgba(0,0,0,0.15);
            }

            /*login*/
            button {
                background: none;
                outline: none;
            }
            .mask {
                position: absolute;
                width: 100%;
                top: 58px;
                bottom: 0;
                left: 0;
                background-color: #f0f0f0;
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
            }

            .login-box {
                position: absolute;
                width: 290px;
                height: 330px;
                background: #fff;
                border-radius: 2px;
                box-shadow: 0 8px 20px 0 rgba(0,0,0,0.2);
                font-family: "Hiragino Sans GB", "Helvetica", "Microsoft YaHei", serif;
            }

            .login-box p {
                width: 100%;
                padding: 3% 13% 10%;
                text-align: center;
                line-height: 1.5;
                color: #03A9F4;
                font-weight: 500;
            }

            .login-box input {
                display: block;
                margin: 0 auto;
                padding-top: 1.33em;
                padding-left: .67em;
                width: 77%;
                border: 0;
                border-bottom: 1px solid #BFBFC0;
                outline: none;
                font-size: .93em;
            }

            .login-box input:focus {
                border-bottom-color: #03A9F4;
            }

            .login-box button {
                display: block;
                padding: 1em 2em;
                width: 100%;
                border: 0;
                outline: 0;
                color: #03A9F4;
                font-size: 1.25rem;
                font-weight: 500;
                letter-spacing: 4px;
                cursor: pointer;
                background: none;
            }

            .login-box-header {
                width: 100%;
                height: 14%;
                cursor: move;
            }

            .btn-sheet {
                position: absolute;
                bottom: 0;
                width: 100%;
            }

            .btn-login-out {
                color: #FF5B45;
            }

            .login-box .login-box-header div {
                position: absolute;
                top: 0;
                right: 0;
                cursor: pointer;
            }

            .login-box .cancel {
                color: #cc9a9a;
                padding: .4em;
                font-size: 1.25rem;
                font-weight: 500;
                text-decoration: none;
            }

            .login-box .cancel a:hover {
                color: #af5b5e;
            }
        </style>
    </head>
    <body>
        <header>
            <a class="login">login</a>
        </header>
        <div class="mask">
            <form class="login-box" style="display: none">
                <div class="login-box-header">
                    <div><a class="cancel">x</a></div>
                </div>
                <p>如果账号不存在，系统将自动为您完成注册</p>
                <input action="text" placeholder="username" contenteditable="false">
                <input type="password" placeholder="password">
                <div class="btn-sheet">
                    <button class="btn-login" type="button">登录</button>
                </div>
            </form>
        </div>
        <script src="./js/drag.js"></script>
    </body>
</html>